<template>
  <view class="background">
    <view class="first-container">
    <view>新闻标题</view>
    <input type="text"  v-model="addNewForm.title" placeholder="请输入">

    <view>新闻分类</view>
    <select v-model="addNewForm.category">
      <option value="校园生活">校园生活</option>
      <option value="校园通知">校园通知</option>
      <option value="校园科技">校园科技</option>
    </select>
    </view>

    <view class="editor-box">
      <sp-editor
          :toolbar-config="{
          excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
          iconSize: '18px'
        }"
          @init="initEditor"
          @input="inputOver"
          @upinImage="upinImage"
          @overMax="overMax"
          @addLink="addLink"
          @exportHtml="exportHtml"
      ></sp-editor>
    </view>
    <button class="button" @click="publishNew()">发布新闻</button>
  </view>
</template>

<script>
import admin from '@/api/admin/index.js'
import student from '@/api/student/index.js'
import store from '@/store'
export default {
  data() {
    return {
      addNewForm : {
        title: '',
        content: ``,
        category: '',
      },
      editorIns: null
    }
  },
  async onLoad () {

  },
  methods: {
    async publishNew() {
      try {
        const res = await admin.publishNews(this.addNewForm)
        if (res.code == 200) {
          uni.showModal({
            content: '新闻发布成功',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            success: (res) => {
              uni.navigateTo({
                url: '/pages/adminIndex/adminIndex',
              });
            },
            fail: () => {
              uni.navigateTo({
                url: '/pages/adminIndex/adminIndex',
              });
            }
          });
        }
        console.log("新闻发布结果",res)
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 获取输入内容
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    inputOver(e) {
      this.addNewForm.content = e.html
      // 可以在此处获取到编辑器已编辑的内容
      console.log('==== inputOver :', e)
      console.log('content : ',this.addNewForm.content)
    },
    /**
     * 超出最大内容限制
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    overMax(e) {
      // 若设置了最大字数限制，可在此处触发超出限制的回调
      console.log('==== overMax :', e)
    },
    /**
     * 编辑器就绪
     * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
     * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
     * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
     */
    initEditor(editor) {
      this.editorIns = editor // 保存编辑器实例
      // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
      this.preRender()
    },
    preRender() {
      setTimeout(() => {
        // 异步获取后端数据后，初始化编辑器内容
        this.editorIns.setContents({
          html: ``
        })
      }, 1000)
    },
    /**
     * 直接运行示例工程插入图片无法正常显示的看这里
     * 因为插件默认采用云端存储图片的方式
     * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
     * @param {Object} tempFiles
     * @param {Object} editorCtx
     */
    async upinImage(tempFiles, editorCtx) {
      /**
       * 本地临时插入图片预览
       * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
       * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
       * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
       */

      // #ifndef MP-WEIXIN
      console.log('开始上传图片')
      uni.uploadFile({ //上传图片
        url: 'http://localhost:8185/news/uploadImage', //开发者服务器 url
        filePath: tempFiles[0].path, //要上传文件资源的路径。
        fileType: 'image', //文件类型，image/video/audio
        name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
        // header: {
        //   'Authorization': 'Bearer your_token_here', // 如果需要认证
        //   // 其他必要的头部信息
        // },
        success: (res) => { //接口调用成功的回调函数
          console.log('uploadImage success, res is:', res.data)
          const responseData = JSON.parse(res.data)
          console.log('阿里云图片路径：',responseData.data)
          editorCtx.insertImage({
            src: responseData.data,
            width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
            success:  async() => {
              console.log('上传图片成功',tempFiles)
            }
          })
        },
        fail: (err) => { //接口调用失败的回调函数
          console.log('失败返回：', err);
        }
      });

      // #endif

    },
    /**
     * 导出 - toolbar需要开启export工具
     * @param {string} e 导出的html内容
     */
    exportHtml(e) {
      uni.navigateTo({
        url: '/pages/out/out',
        success(res) {
          // 传至导出页面解析即可
          res.eventChannel.emit('e-transmit-html', {
            data: e
          })
        }
      })
    },
    /**
     * 添加超链接
     * @param {Object} e { text: '链接描述', href: '链接地址' }
     */
    addLink(e) {
      console.log('==== addLink :', e)
    }
  }
}
</script>

<style>
.background {
  background: linear-gradient(to bottom, #E4DDF5 0%, #FFFFFF 20%); /* 从淡蓝色到白色的渐变 */
  position: relative; /* 设置相对定位 */
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
}
.first-container {
  width: 90%;
  height: 20%;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 设置子元素之间的间距 */

}
.first-container > view {
  margin-bottom: 20rpx;
  font-weight: bold;
  font-size: 14px;
}

.first-container > input {
  width: 85%; /* 输入框宽度占满容器 */
  height: 40px; /* 输入框高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
}
select {
  width: 90%; /* 输入框宽度占满容器 */
  height: 40px; /* 输入框高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
}
.button {
  border: 0;
  background-color: #b3cdef;
  color: white;
  width: 90%;
  font-size: 12px;
  position: absolute;
  bottom: 100rpx;
  right:40rpx;
}
.editor-box {
  height: 60vh;
}

</style>